// 颜色变量
cl-gray = #8b8b8b
cl-w = #ffffff
cl-green = #46c63d
cl-dkgreen = #329F2B
cl-red = #C25454


.wrapper-login
  width 100%
  min-height 600px
  position absolute
  background-repeat no-repeat
  background-attachment fixed
  background-size cover
  transition height linear .3s
  .nav
    width 100%
    box-sizing border-box
    text-align center
    position absolute
    bottom 10px
    padding 10px
    .logo
      width 60px
      margin-right 10px
    .title
      padding-left 10px
      border-left 1px solid #F7F7F7
      color #F7F7F7

.login-wrap
  overflow hidden
  .login-inner
    width 75%
    margin auto
    margin-top 80px
    .input-bar-wrap
      height 28px
      line-height 28px
      margin-bottom 25px
      input 
        padding-left 4%
        width 80%
      .icon-warn
        color cl-red
      .warn-text
        padding-left 4%
      
    .btn-login
      width 100%
      height 36px
      line-height 36px
      color cl-w
      border-radius 18px;
      box-shadow 0px 6px 15px 0px rgba(52, 65, 74, 0.35)
      margin-top 72px
      background-color cl-green
      text-align center
      cursor pointer
      font-size 1rem
      &:hover
        background-color cl-dkgreen
      &:active
        background-color cl-dkgreen
    .skip
      margin-top 16px
      text-align center
      text-decoration underline
      a
        color inherit


// 相应式样式
@media(max-width 850px)
  .wrapper-login
    background-image url("../static/ground.jpg")
    .login-wrap
      margin 0 auto
      margin-top: 20%
    .icon-user, .icon-pass
      color cl-w
    .input-bar-wrap
      border-bottom 1px solid cl-w
      input 
        color cl-w
        font-size 1rem
        &::-webkit-input-placeholder
          color #cccccc
    .skip
      color #bcbcbc
      font-size 0.8rem
    .icon-warn
      color #DD6262
    .warn-text
      color #cccccc
      font-size 0.8rem

@media(max-width 500px)
  .wrapper-login
    display block
@media(min-width 500px) and (max-width 850px)
  .wrapper-login
    .btn-login
      height 88px
    .login-wrap
      width 500px
      .btn-login
        height 48px
        line-height 48px
        border-radius: 24px
        font-size 1.2rem
      .input-bar-wrap
        height 45px
        line-height 45px
        margin-bottom 25px
        .iconfont
          font-size 1.4rem
        input 
          line-height: 45px
          padding-left 4%
          width 80%
          font-size 1.2rem
@media(min-width 850px)
  .wrapper-login
    background-image url("../static/ground.jpg")
    background-repeat no-repeat
    .login-wrap
      width 300px
      height 400px
      border-radius 7px
      box-shadow 0px 0px 15px 0px rgba(0, 0, 0, 0.2)
      background rgba(255,255,255,.95)
      position absolute
      top 15%
      right 17%
    .icon-user, .icon-pass
      color cl-gray
    .icon-warn
      color cl-red
    .input-bar-wrap
      border-bottom 1px solid cl-gray
      input 
        font-size 0.8rem
    .skip
      color cl-gray
      font-size 0.8rem
    .warn-text
      font-size 10px
      color #aaa

